import { React, useState, useEffect } from 'react'
import Tabber from '../copmonets/Tabber'
import {Toast, Rate, Dialog} from 'antd-mobile'
import './trade.css'
import _ from 'lodash'
import {getInfo, confirmOrderTwo, matchOrder, getTradInfo, get_order_info_list} from '../request/api'
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

export default function Trade() {
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();
    const throttle = _.throttle;
    const [userInfo, setUserInfo] = useState({})
    const [data, setData] = useState([])
    const [appear, setAppear] = useState(false)
    const [need, setNeed] = useState(false)
    const [orderId, setOrderId] = useState('')
    const [tradInfo, setTradInfo] = useState({})
    let star = 0;

    const getdata = async () => {
        const res = await getInfo({})
        setUserInfo(res.data)
        // console.log(isNaN(parseFloat(userInfo.balance + '')));
        // if(isNaN(parseFloat(userInfo.balance + ''))) {
        //     Dialog.confirm({
        //         content: t('t27'),
        //         cancelText: t('ty2'),
        //         confirmText: t('ty1'),
        //         onConfirm: async () => {
        //             navigate('/UserPay', {state: 2})
        //         },
        //     })
        // }
    }
    const submit = async () => {
        Toast.show({
            icon: 'loading',
            content: t('t4_1'),
            duration: 0,
        })
        const res = await matchOrder({})
        Toast.clear()
        if (res.code ==0) {
            if (res.data?.action == 'orderUrl') {
                Toast.show({
                    content: res.info,
                })
                setTimeout(() => {
                    navigate('/Order')
                }, 2000);
                return;
            }
            setOrderId(res.oid)
            getGoodsInfo(res.oid)
            // setOrderId(res.oid)
        } else if (res.code == 102) {
            Toast.show({
                content: res.info,
            })
        } else if (res.code == 10) {
            Dialog.confirm({
                content: t('t27'),
                cancelText: t('ty2'),
                confirmText: t('ty1'),
                onConfirm: async () => {
                    navigate('/UserPay', {state: 2})
                },
            })
        } else {
            Toast.show({
                content: res.info,
            })
        }
    }
    const getGoodsInfo = async (oid)=>{
        let res = await get_order_info_list({id: oid})
        setData(res.data[0])
        // if (Number(userInfo.balance) < Number(data.num)) {
        //     setNeed(true)
        // } else {
        //     setNeed(false)
        // }
        setAppear(true)
    }
    const startPops = throttle(() => {
        submit()
    }, 1500, { 'trailing': false })

    const getTradInfoData = async ()=>{
        let res = await getTradInfo({})
        setTradInfo(res.data)
    }
    const submitOrder = throttle(() => {
        if (star < 4){
            /*return Toast.show({
                icon: 'fail',
                content: t('t6'),
            })*/
        }
        Toast.show({
            icon: 'loading',
            content: t('t4'),
        })
        confirmOrderTwo({ id: data.id }).then(res => {
            if (res.code == 0) {
                Toast.show({
                    icon: 'success',
                    content: t('t7'),
                })
            } else {
                Toast.show({
                    content: t('t9'),
                })
                setAppear(false)
            }
            setTimeout(() => {
                window.location.reload()
            }, 1000);
        })
    }, 1500, { 'trailing': false })
    useEffect(() => {
        getdata()
        getTradInfoData()
    }, [])
    const starChange = (v)=>{
        star = v
    }
    return (
        <div className='Trade'>
            <div className='header'>{t('n3')}</div>
            <div className='Trade_box'>
                <div className='Trade_top'>
                    <p>{t('j1')}</p>
                    <div>
                        <p>USDT:</p>
                        <p>{userInfo.balance}</p>
                    </div>
                </div>
                <div className='Trade_title'>
                    <div className='Trade_text'>
                        <p>{t('j2')}</p>
                        <p>{t('j3')}</p>
                    </div>
                    <div className='Trade_fun'>
                        <div>
                            <p>{t('j6')}</p>
                            <p>{tradInfo.completeOrder}</p>
                        </div>
                        <div>
                            <p>{t('j7')}</p>
                            <p>{tradInfo.allOrderNum}</p>
                        </div>
                    </div>
                    <div className='Trade_start' onClick={startPops}>
                        <p>{t('j4')}</p>
                    </div>
                    <div className='Trade_result'>
                        <div>
                            <img src="./assets/index/shouyi.svg" alt="" />
                            <p>{t('d8')}:</p>
                            <p>0.6%</p>
                        </div>
                        <div>
                            <img src="./assets/index/daole.svg" alt="" />
                            <p>{t('j5')}:</p>
                            <p style={{ color: 'rgb(255, 83, 83)' }}>{userInfo.today_win} USDT</p>
                        </div>
                    </div>
                </div>
            </div>
            {appear && < div className='modelWindow'>
                <div className='window_center'>
                    <div className='order_window'>
                        <div>
                            <div className='card_tops'>
                                <img src={data.goods_pic} alt="" />
                                <div className='list_texts' style={{ margin: '0 0 0 10px' }}>
                                    <p>{data.goods_name}</p>
                                    <div>
                                        <p>{data.num}</p>
                                        <p>X{data.numb}</p>
                                    </div>
                                </div>
                            </div>
                            <div className='card_down'>
                                <div>
                                    <p>{t('d5')}</p>
                                    <p>{data.addtime}</p>
                                </div>
                                <div>
                                    <p>{t('d6')}</p>
                                    <p>{+((data.goods_price * data.numb).toFixed(2))}</p>
                                </div>
                               {/*{need && <div>
                                    <p>{t('d9')}</p>
                                    <p>{(Number(userInfo.balance) - Number(data.goods_price)).toFixed(2)}</p>
                                </div>}*/}
                                {data.need_money && <div>
                                    <p>{t('d9')}</p>
                                    <p>{data.need_money}</p>
                                </div>}
                                <div>
                                    <p>{t('d7')}</p>
                                    <p>{data.deal_count}</p>
                                </div>
                                <div>
                                    <p>{t('d8')}</p>
                                    <p style={{ color: '#ff5353' }}>{data.commission}</p>
                                </div>
                            </div>
                        </div>
                        {<div className='capital_evaluate'>
                            <p>{t('d10')}</p>
                            <Rate style={{
                                '--star-size': '22px',
                                '--active-color': '#ff0000',
                            }} onChange={(val) => { starChange(val) }} />
                        </div>}
                    </div>
                    <div className='pop_but_trade' onClick={() => { submitOrder() }}>
                        <p>{t('ty3')}</p>
                    </div>
                    <div className='pop_but_trade cancel' onClick={() => { setAppear(false) }}>
                        <p>{t('ty2')}</p>
                    </div>
                </div>
            </div>}
            <Tabber></Tabber>
        </div >
    )
}
